<template>
  <div class="wrap">
    <!--    轮播图  -->
    <div class="index_lunbo">
      <div class="swiper-container" style="width: 100%;height:3.1rem;">
        <div class="swiper-wrapper" style="width: 100%;height:100%">
          <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="$store.state.imgurlApi+el">
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <p class="back" @click="back"><img src="../../assets/img/zuojiantou.png" alt=""></p>
    </div>
    <!--  详情  -->
    <div class="infoWrap">
      <div class="infoName">
        <p>{{shopMsg.title}}</p>
      </div>
      <!--<div class="infoDetails">除了酸味，百香果是世界上已知，充满芳香的水果之一。 冰淇淋口感，不同层次的酸与冰凉</div>-->
      <div class="shopJF">
        {{shopMsg.integral}}积分+{{shopMsg.money}}元
      </div>
    </div>
    <div class="fgx"></div>
    <!-- 规格选择  -->
    <div class="guige">
      <div class="gg_2" @click="ggShow">
        <p>已选</p>
        <p><span style="color: #575757">默认&nbsp;&nbsp;</span>x{{value}}</p>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
      <div class="gg_2" @click="isShow('show1')">
        <p>配送</p>
        <p style="color: #575757">{{actions[sel1].name}}</p>
        <img src="../../../static/img/yj11.png" alt="">
      </div>
    </div>
    <div class="fgx"></div>
    <div class="fgx"></div>
    <!--  宝贝详细信息  -->
    <div class="details">
      <div>宝贝详情</div>
      <div class="detailsInfo">
        <p>该商品暂无详情</p>
      </div>
    </div>

    <footer>
      <div class="foot_3" @click="jump('integralOrder')">立即兑换</div>
    </footer>

    <!--  选择支付  -->
    <!--  选择支付  -->
    <van-popup v-model="look" class="fkPopup">
      <div class="fkbox">
        <div class="fktit">{{shopMsg.title}}</div>
        <div class="fkitem">
          <p>规格</p>
          <div>
            <p class="selected">默认</p>
            <p style="opacity: 0"></p>
            <p style="opacity: 0"></p>
          </div>
        </div>
        <div class="fkNum">
          <p>数量</p>
          <van-stepper v-model="value" theme="round" button-size="22" min="1" max="99"  @change="selectNum" disable-input disabled />
        </div>
        <div class="yxguige">
          <p>已选规格：</p>
          <p><span >默认&nbsp;&nbsp;</span>&ensp;x&ensp;{{value}}</p>
        </div>
        <div class="guifoot">
          <p><span>￥</span>{{price}}</p>
          <p @click="closeGuiGe">确定</p>
        </div>
        <p style="height: .01rem;width:100%;"></p>
      </div>
    </van-popup>



    <van-action-sheet
      v-model="show1"
      :actions="actions"
      description="配送方式"
      @select="onSelect"
    />


  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/css/swiper.css';
  import Vue from 'vue';
  import {ActionSheet, popup} from 'vant';

  Vue.use(ActionSheet);
  Vue.use(popup);

  export default {
    name: "PointExchange",
    data() {
      return {
        lunbolist: [], // 轮播图
        look: false,
        show1: false,
        sel1: 0,
        actions: [
          {name: '外卖配送',type:0},
          {name: '到店自取',type:1},
        ],
        showList: true,
        thisComment:false, // 当前是否点赞
        value:1,
        price:0,
        shopMsg:'', // 商品详情
      }
    },
    created() {
        // 获取商品详情
        this.$myAxios('index/Integral/details','post',{
            pid:this.$route.query.id
        }).then(res=>{
          if (res.data.state == '1') {
            var lunbo = res.data.integral_goods.image;
            this.lunbolist = lunbo.split(',');
            this.$nextTick(() => {
              this.initSwiper()
            });
            this.shopMsg = res.data.integral_goods;
            this.price = res.data.integral_goods.money*1;
          } else {
            this.$myNotice('网络出现问题~',1500)
          }
        })
    },
    mounted() {

    },
    methods: {
      initSwiper () {
        //    这里配置swiper轮播图
        new Swiper('.swiper-container', {
          observer:true,
          observeParents: true,
          circular:true,
          loop: true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          autoplay:{
            delay:3000,
            disableOnInteraction: false
          }
        });
      },
      back() {
        this.$router.back();
      },
      jump(page) {
        this.$router.push({
          name: page,
          query:{
            id:this.$route.query.id,
            type:JSON.stringify(this.actions[this.sel1])
          }
        })
      },
      closeGuiGe() {
        this.look = false;
      },
      ggShow() {
        this.look = true;
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.show1 = false;
        this.sel1 = item.type;
      },
      isShow(res) {
        this[res] = true;
      },
      onChange(index) {
        this.showList = false;
        this.chosenCoupon = index;
      },
      onExchange(code) {
        this.coupons.push(coupon);
      },
      // 数量变化
      selectNum(value){
        // 计算价格

      }
    }
  }
</script>

<style scoped>
  .wrap {
    background-color: #FFFFFF;
    min-height: 6.17rem;
    padding-bottom: .5rem;
  }

  .empty {
    height: .5rem;
    line-height: .5rem;
    font-size: .16rem;
    text-align: center;
    font-family: PingFang SC;
    color: #999999;
  }

  /* 轮播图部分 */
  .index_lunbo {
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }


  .index_swiper_listimg {
    width: 100%;
    height: 100%;
  }



  .ct_left1 > span {
    font-size: .2rem;
  }


  .ct_left2 > p:nth-child(1) {
    margin-bottom: .05rem;
  }

  .ct_left2 > p:nth-child(1) > span:nth-child(1) {
    text-decoration: line-through;
  }

  .ct_left2 > p:nth-child(2) {
    width: .38rem;
    height: .17rem;
    background: rgba(255, 255, 255, 1);
    border-radius: .02rem;
    color: #FF7611;
    font-size: .11rem;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    line-height: .17rem;
  }


  .ct_right > p:nth-child(1) {
    color: #FF7611;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    margin-bottom: .05rem;
  }


  .ct_right1 > p {
    width: .14rem;
    height: .14rem;
    background: rgba(255, 118, 17, 1);
    border-radius: .02rem;
    color: #ffffff;
    text-align: center;
    line-height: .14rem;
  }


  .infoWrap {
    width: 100%;
    box-sizing: border-box;
    padding: .15rem;
    padding-bottom: .1rem;
    background-color: #ffffff;
  }
  .shopJF {
    height: .4rem;
    font-size:.16rem;
    line-height: .4rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FA3C2A;
  }
  .infoName {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .03rem;
  }


  .infoName > p {
    font-size: .15rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #282828;
  }

  .infoDetails {
    width: 100%;
    box-sizing: border-box;
    padding-right: .2rem;
    font-size: .13rem;
    line-height: .19rem;
    color: #A7A7A7;
    font-family: PingFang SC;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .fgx {
    width: 100%;
    height: .1rem;
    background-color: #F5F5F5;
  }

  /*  规格 */
  .guige {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 .15rem;
  }

  .guige > div {
    height: .5rem;
    border-bottom: .01rem solid #F8F8F8;
  }

  .guige > div:nth-last-child(1) {
    border: none;
  }

  .gg_1, .gg_2 {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    position: relative;
  }

  .gg_1 > img:nth-child(1) {
    width: .6rem;
    height: .25rem;
    margin-right: .1rem;
  }

  .gg_1 > p {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .gg_1 > img:nth-child(3), .gg_2 > img:nth-child(3) {
    width: .06rem;
    height: .11rem;
    position: absolute;
    right: 0;
  }

  .gg_2 {
    color: #919191;
  }

  .gg_2 > p {
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
  }

  .gg_2 > p:nth-child(1) {
    margin-right: .15rem;
  }



  footer {
    width: 100%;
    height: .45rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
  }

   .foot_3 {
    height: 100%;
    width: 100%;
    line-height: .45rem;
    text-align: center;
    color: #ffffff;
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
     background-color: #FF7611;
  }



  .cantuan > p:nth-child(1) {
    font-size: .18rem;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #FA3C2A;
  }

  .cantuan > p:nth-child(1) > span, .cantuan > p:nth-child(2) > span {
    font-size: .1rem;
  }

  .cantuan > p:nth-child(2) {
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: bold;
  }

  .cantuan > p:nth-child(2) {
    color: #A3A3A3;
  }


  .fkbox {
    background: rgba(255, 255, 255, 1);
    border-radius: .06rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding: .1rem .2rem;
    position: relative;
  }

  .fktit {
    height: .5rem;
    line-height: .5rem;
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #282828;
  }

  .fkitem {
    margin-bottom: .1rem;
  }
  .fkNum {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
  }
  .fkNum>p {
    margin: 0 !important;
  }

  .fkitem > p,.fkNum>p {
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #242424;
    margin-bottom: .1rem;
  }

  .fkitem > div {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    /*justify-content: space-between;*/
  }

  .fkitem > div > p:nth-child(2) {
    margin: 0 .2rem;
  }

  .fkitem > div > p {
    width: .8rem;
    height: .36rem;
    background: rgba(241, 241, 241, 1);
    border: .01rem solid #F1F1F1;
    border-radius: .07rem;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #666666;
    text-align: center;
    line-height: .36rem;
  }

  .yxguige {
    height: .4rem;
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    background-color: #FAFAFA;
  }

  .yxguige > p:nth-child(1) {
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }

  .yxguige > p:nth-child(2) {
    color: #333333;
  }

  .guifoot {
    height: .6rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .guifoot > p:nth-child(1) {
    font-size: .24rem;
    font-family: San Francisco Display;
    font-weight: 500;
    color: #FF433C;
  }

  .guifoot > p:nth-child(1) > span {
    font-size: .16rem;
  }

  .guifoot > p:nth-child(2) {
    width: 1.08rem;
    height: .35rem;
    background: linear-gradient(0deg, rgba(255, 142, 65, 1), rgba(255, 110, 0, 1));
    box-shadow: 0 .06rem .11rem 0 rgba(255, 118, 17, 0.4);
    border-radius: .17rem;
    line-height: .35rem;
    text-align: center;
    color: #ffffff;
    font-size: .15rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
  }


  .selected {
    background: rgba(255, 239, 220, 1) !important;
    border: .01rem solid rgba(255, 118, 17, 1) !important;
    color: #FF7611 !important;
  }

  /* 弹出框 */
  >>> .van-action-sheet__description {
    padding: .16rem;
    color: #333333;
    font-size: .18rem;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: .2rem;
  }

  >>> .van-action-sheet__cancel, .van-action-sheet__item {
    font-size: .18rem;
    line-height: .5rem;
    color: #333333;
    text-align: left;
    box-sizing: border-box;
    padding-left: .2rem;
  }

  >>> .van-popup {
    min-height: 2rem;
  }

  >>> .van-popup--bottom.van-popup--round {
    border-radius: .2rem .2rem 0 0;
  }

  >>> .van-action-sheet__item {
    height: .5rem;
  }



  .back {
    width: .2rem;
    height: .25rem;
    position: fixed;
    top: .15rem;
    left: .13rem;
    text-align: center;
    z-index: 999;
  }

  .back > img {
    width: .1rem;
    height: .17rem;
  }

  /* 轮播图小圆点颜色改变 */
  >>> .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: rgba(252, 216, 144, .68) !important;
  }


  /* 宝贝详情 */
  .details {
    background-color: #FFFFFF;
  }
  .details>div:nth-child(1) {
    width: .6rem;
    margin: 0 auto;
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    position: relative;
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .details>div:nth-child(1):before{
    height: .01rem;
    width: .5rem;
    position: absolute;
    background-color: #e3e3e3;
    content: '';
    top: 50%;
    left:-.55rem;
  }
  .details>div:nth-child(1):after {
    height: .01rem;
    width: .5rem;
    position: absolute;
    background-color: #e3e3e3;
    content: '';
    top: 50%;
    right: -.55rem;
  }

  .detailsInfo{
    text-align: center;
  }
  .detailsInfo>p {
    font-size: .13rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    height: .3rem;
    line-height: .3rem;
  }


  /* 弹窗适配 */
  >>> .fkPopup {
    padding: .02rem;
    background-color: transparent;
  }
  /* 加减数量适配 */
  >>> .van-stepper__minus,>>> .van-stepper__plus {
    width: .22rem !important;
    height: .22rem !important;
    padding: .04rem;
  }
  >>> .van-stepper__minus::before,>>> .van-stepper__plus::before {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper--round .van-stepper__plus {
    background-color: #FF7611;
  }
  >>> .van-stepper__minus::after {
    width: .13rem;
    height: .01rem;
  }
  >>> .van-stepper__plus::after {
    width: .01rem;
    height: .13rem;
  }
  >>> .van-stepper__input {
    border-width: .01rem 0;
    margin: 0 .02rem;
    font-size: .14rem;
    width: .32rem;
    height: .22rem !important;
  }
</style>
